<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS盒模型</title>
        <style media="screen">
            html * {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <!-- BFC垂直方向边距重叠 -->

        <section id="margin">
            <style>
                #margin {
                    background: pink;
                    overflow: hidden;
                }
                #margin > p {
                    margin: 5px auto 25px;
                    background: red;
                }
            </style>
            <p>1</p>
            <div style="overflow: hidden">
                <p>2</p>
            </div>
            <p>3</p>
        </section>

        <!-- BFC不与float重叠 -->
        <section id="layout">
            <style media="screen">
                #layout {
                    background: red;
                }
                #layout .left {
                    float: left;
                    width: 100px;
                    height: 100px;
                    background: pink;
                }
                #layout .right {
                    height: 110px;
                    background: #ccc;
                    overflow: auto;
                }
            </style>
            <div class="left"></div>
            <div class="right"></div>
        </section>

        <!-- BFC子元素即使是float也会参与计算 -->
        <section id="float">
            <style media="screen">
                #float {
                    background: red;
                    overflow: auto;
                    /*float: left;*/
                }
                #float .float {
                    float: left;
                    font-size: 30px;
                }
            </style>
            <div class="float">我是浮动元素</div>
        </section>
    </body>
</html>
